<template>
  <div class="shop_car">
    <!-- 这是第一个 卡片 -->
    <div class="first">
      <div class="mui-card" v-for="(item, i) in goodList" :key="item.id">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <mt-switch v-model="$store.getters.getGoodsSelect[item.id]" @change="getSelect(item.id,$store.getters.getGoodsSelect[item.id])"></mt-switch>
            </div>
            <img :src="item.thumb_path">
            <div class="shop_car_info">
                <h2>{{item.title}}</h2>
                <span class="shop_car_price">￥{{item.sell_price}}</span>
                <!-- 引入插件 -->
                <goodsNumbox style="height:25px" :goodscount="$store.getters.getGoodCount[item.id]" :gid="item.id"></goodsNumbox>
                <!-- {{$store.getters.getGoodCount[item.id]}} 中 [item.id] 表示变量 直接点的话，是确定数 -->
                <a href="#" class="good_del" @click.prevent="delnum(item.id,i)">删除 </a>
            </div>
        </div>
      </div>
    </div>

    <!-- 这是第二个 -->
    <div class="second">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <div class="tobuy">
                <div class="left">
                    <p>总计(不含运费)</p>
                    <p>已勾选商品<span class="jian">{{$store.getters.getGoodsPrice.jian}}</span>件，总价: <span class="allmoney">￥{{$store.getters.getGoodsPrice.Zprice}}</span> </p>
                </div>
                    <mt-button type="danger" size="normal">去结算</mt-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goods_numbox from "./../goods/goods-numbox.vue"
export default {
    data(){
        return{
            goodList:[],  //用于 存储 购物车页面的信息
        }
    },
    created() {
        this.getshopcarInfo()
    },
    methods: {
        // 获取 购物车页面的详情
        getshopcarInfo(){
            // 请求地址 中需要购物车里面id 拼接 Url ： /api/goods/getshopcarlist/87,88,89
            var goodid=[]
           //  循环购物车里面 每一项，获取数组，push到goodid 里面 先 判断 car里面有没有数据
           if(this.$store.state.car.length==0){
               return
           }
           this.$store.state.car.forEach(item=>{
               goodid.push(item.id)
           })
            this.$http.get("api/goods/getshopcarlist/" + goodid.join(",")).then(result=>{
                if(result.body.status===0){
                    this.goodList = result.body.message
                    // console.log(this.$store.state.car)
                }
            })
        },
        
        delnum(id,i){
            // 点击 a 连接 进行删除 ，要删除 在shopcar页面 删除一行 ，
            this.goodList.splice(i,1);
            // 另外也要删除 main.js 里面，重新加载到localStorage 里面
            this.$store.commit("removegoods",id)
        },

        // 保存 选项的 状态
        getSelect(id,val){
            // console.log(id + "----" + val)
            //  用户 商品 选中状态的修改 需要在 vuex 中修改 
            this.$store.commit("updateGoodsSelect",{id,selected:val})
        }
        

    },
    components:{
        goodsNumbox:goods_numbox
    }
}
</script>

<style lang="less" scoped>
    .shop_car{
        background-color: #eee;
        overflow: hidden;
        .first{
            .mui-card-content{
                padding: 10px 0;
                display: flex;
                align-items: center;
                img{
                    width: 60px;
                    height: 60px;
                }
                .shop_car_info{
                    h2{
                        font-size: 13px;
                        margin-bottom: 10px;
                        padding-right: 5px;
                        line-height: 25px;
                    }
                    .shop_car_price{
                        color: red;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right:10px;
                    }
                    .good_del{
                        margin-left: 10px;
                    }
                }
            }
            .mui-card-content-inner{
                padding-right: 0;
            }
        }
        .second{
            .mui-card-content-inner{
                .tobuy{
                    align-items: center;
                    display: flex;
                    .left{
                        flex: 3;
                        p{
                            line-height: 25px;
                            span{
                                margin: 0 5px;
                                color: red;
                                font-size: 20px;
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
